import React from 'react';
import {
    Form, Input,
    Button, message
} from 'antd';
import { API } from './net/api';
import {
    withRouter
} from "react-router-dom";
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import './Login.css';
import 'antd/dist/antd.css';

class Register extends React.Component {

    render() {
        let { history } = this.props;

        const onFinish = values => {
            API('register',{
                id: values.account,
                pwd: values.password
            }).then((res)=>{
                if(res.retcode==='0000'){
                    message.success('验证成功');
                    history.push({pathname: '/login'})
                }else{
                    message.error('账号或密码错误！');
                }
            });
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        return (
            <div className="login-form">
                <div className='titleArea'>
                    <span className='title'><i>ecnu</i>&nbsp;账号验证</span>
                </div>
                <Form
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    wrapperCol={24}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item name="account"
                               rules={[
                                   {
                                       required: true,
                                       message: '请输入公共数据库账号!',
                                   },
                               ]}
                    >
                        <Input placeholder="公共数据库账号" prefix={<UserOutlined/>}/>
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input.Password placeholder="密码" prefix={<LockOutlined/>}/>

                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" block style={{marginBottom:"5px"}}>
                            验证账号
                        </Button>
                        <div style={{color:"rgba(0,0,0,.45)",fontSize:"12px"}}>*说明：注册仅为验证账号密码是否正确以供后续预定使用</div>
                    </Form.Item>
                </Form>
            </div>

        );
    }
}

export default withRouter(Register);